<template>
    <!-- 首路径 -->
    <el-card v-if="depth === 1">
        <el-collapse v-model="activeNames">
            <template v-for="(value, key) in data" :key="key">
                <!-- 处理最后一层（包含路由信息的节点） -->
                <template v-if="isRouteInfo(value)">
                    <el-collapse-item :name="`${prefix}-${key}`">
                        <template #title>
                            <div class="custom__title custom__title-last">{{ key }}</div>
                        </template>
                        <el-row :gutter="20">
                            <el-col :span="16">
                                <span>路径：</span>
                                <el-text class="mx-1" type="primary">{{ value.url }}</el-text>
                            </el-col>
                            <el-col :span="8" style="text-align: right;">
                                <el-button type="primary" @click="handleRoute(value as RouteInfo)">跳转</el-button>
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                </template>

                <!-- 处理中间层级（子菜单） -->
                <template v-else>
                    <el-collapse-item :name="`${prefix}-${key}`">
                        <template #title>
                            <div class="custom__title">{{ key }}</div>
                        </template>
                        <div class="custom__submenu-content">
                            <url-child :data="value" :prefix="`${prefix}-${key}`" :depth="depth + 1" />
                        </div>
                    </el-collapse-item>
                </template>
            </template>
        </el-collapse>
    </el-card>

    <!-- 非首个路径 -->
    <el-collapse v-else v-model="activeNames">
        <template v-for="(value, key) in data" :key="key">
            <!-- 处理最后一层（包含路由信息的节点） -->
            <template v-if="isRouteInfo(value)">
                <el-collapse-item :name="`${prefix}-${key}`">
                    <template #title>
                        <div class="custom__title custom__title-last">{{ key }}</div>
                    </template>
                    <el-row :gutter="20">
                        <el-col :span="16">
                            <span>路径：</span>
                            <el-text class="mx-1" type="primary">{{ value.url }}</el-text>
                        </el-col>
                        <el-col :span="8" style="text-align: right;">
                            <el-button type="primary" @click="handleRoute(value as RouteInfo)">跳转</el-button>
                        </el-col>
                    </el-row>
                </el-collapse-item>
            </template>

            <!-- 处理中间层级（子菜单） -->
            <template v-else>
                <el-collapse-item :name="`${prefix}-${key}`">
                    <template #title>
                        <div class="custom__title">{{ key }}</div>
                    </template>
                    <div class="custom__submenu-content">
                        <url-child :data="value" :prefix="`${prefix}-${key}`" :depth="depth + 1" />
                    </div>
                </el-collapse-item>
            </template>
        </template>
    </el-collapse>
</template>

<script lang="ts" setup>
    import { ref, type PropType } from 'vue'

    // 类型
    import type { RouteInfo, RouteTier } from './type.d'

    // 定义选项
    defineOptions({
        name: 'UrlChild'
    })

    // 定义属性
    const props = defineProps({
        // 路由层级数据
        data: {
            type: Object as PropType<RouteTier>,
            required: true
        },
        // 前缀
        prefix: {
            type: String,
            required: true
        },
        // 深度
        depth: {
            type: Number,
            required: true
        }
    })

    // 判断是否为路由信息
    const isRouteInfo = (value: unknown): boolean => {
        return value !== null &&
            typeof value === 'object' &&
            'path' in (value as object) &&
            'title' in (value as object)
    }

    // 获取所有可能的菜单项名称
    const getAllMenuNames = (data: RouteTier, prefix: string): string[] => {
        let names: string[] = []
        Object.entries(data).forEach(([key, value]) => {
            const currentName = `${prefix}-${key}`
            names.push(currentName)
            if (!isRouteInfo(value)) {
                names = names.concat(getAllMenuNames(value, currentName))
            }
        })
        return names
    }

    // 初始化为空数组
    const activeNames = ref<string[]>([])

    // 监听数据变化，更新展开状态
    activeNames.value = getAllMenuNames(props.data, props.prefix)

    // 处理路由跳转
    const handleRoute = (route: RouteInfo) => {
        if (!route.url) return
        window.open(route.url)
    }
</script>

<style lang="scss" scoped>
    .custom__title {
        font-size: 18px;
    }

    .custom__title-last {
        color: #1b65b9;
    }

    .custom__submenu-content {
        padding-left: 40px;
    }
</style>